<template>
	<view>
		<view class="rechargeBox">
			<view class="rechargeTittle">
				充值金额
			</view>
			<view class="rechargeValue">
					<image class="balanceIcon" src="../../../../static/my/myBack/rmb.png" mode=""></image>
				<view class="rechargeInput">
					<input type="number" v-model="balance"  />
				</view>
					<image @click="clearBlance" class="clearBlance" src="../../../../static/my/myBack/clear.png" mode=""></image>
			</view>
		</view>
		<view class="chargeMethod">
			请选择付款方式
		</view>
		<view class="payBox">
			<image class="icon" src="../../../../static/my/myBack/wechat.png" mode=""></image>
			<view class="explainBox">
				<view class="explainTittle">
					微信支付
				</view>
				<view class="slogan">
					通过微信立即支付，方便快捷
				</view>
			</view>
			<view class="iconBox" @click="choosePayMethod(0)">
				<image v-if="payMethod == 1" class="chooseIcon" :src="$img('/static/my/myBack/gou1.png')" mode=""></image>
				<image v-else class="chooseIcon" :src="$img('/static/2021-08-30/10095dbf771762d576cc6ade568c6e0.png')" mode=""></image>
			</view>
		</view>
		<view class="payBox">
			<image class="icon" src="../../../../static/my/myBack/alipay.png" mode=""></image>
			<view class="explainBox">
				<view class="explainTittle">
					支付宝支付
				</view>
				<view class="slogan">
					推荐有支付宝账号的用户使用
				</view>
			</view>
			<view class="iconBox" @click="choosePayMethod(1)">
				<image v-if="payMethod == 0" class="chooseIcon" :src="$img('/static/my/myBack/gou1.png')" mode=""></image>
				<image v-else class="chooseIcon" :src="$img('/static/2021-08-30/10095dbf771762d576cc6ade568c6e0.png')" mode=""></image>
			</view>
		</view>
		<view @click="getMethod" class="chargeButton">
			确认充值
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance:0,
				payMethod:0
			}
		},
		methods: {
			choosePayMethod(data){
				// console.log(data)
				this.payMethod = data
			},
				clearBlance(){
					this.balance = ''
				},
				getMethod(){
					if(this.balance <= 0){
						uni.showToast({
							icon:"none",
							title:"请输入充值金额"
						})
						return
					}else{
						this.isCharge()
					}
				},
				isCharge(){
					let data = {
						price:this.balance
					}
					let apiurl = ''
					let payType = ''
					let orderInfo = ''
					if(this.payMethod==0){
						// 微信支付
						apiurl = '/api/wx_apy/pay_wx'
						payType = 'wxpay'
					}else{
						// 支付宝支付
						apiurl = '/api/alipay/pay_alipay'
						payType = 'alipay'
					}
					this.$utils.postrequest(apiurl,data,res=>{
						// console.log(res);
						if(res.code == 200){
							// console.log(res.data)
							uni.requestPayment({
							    provider: payType,
							    orderInfo: res.data, //微信、支付宝订单数据
							    success: function (res) {
									uni.showToast({
										icon:"none",
										title:"充值成功"
									})
									setTimeout(()=>{
										uni.navigateBack();
									},500)
							        // console.log('success:' + JSON.stringify(res));
							    },
							    fail: function (err) {
							        // console.log('fail:' + JSON.stringify(err));
											uni.showModal({
												content:JSON.stringify(err)
											})
							    }
							});
						}else {
							uni.showToast({
								icon:"none",
								title:"支付失败"
							})
						}
					})
				}
		}
	}
</script>

<style>
	page {
		/* padding: 0rpx 30rpx 0rpx 30rpx; */
	}
	
	input {
		font-size: 71rpx;
		width: 600rpx;
	}
	
	.chooseIcon {
		height: 36rpx;
		width: 36rpx;
	}
	.uni-input-input {
		font-size: 71rpx !important;
	}

	.rechargeBox {
		margin-top: 67rpx;
		padding: 0rpx 30rpx 0rpx 30rpx;
	}

	.rechargeValue {
		height: 100rpx;
		position: relative;
		margin-top: 54rpx;
		display: flex;
		flex-direction: row;
	}

	.rechargeInput {
		margin-left: 47rpx;
		height: 53rpx;
		width: 300rpx;
		font-size: 71rpx !important;
		font-family: PingFang SC;
		
		color: #333333;
	}

	.chargeMethod {
		height: 60rpx;
		width: 750rpx;
		background: #F6F5F5;
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx 0rpx 30rpx;
		font-size: 26rpx;
	}

	.payBox {
		position: relative;
		height: 138rpx;
		display: flex;
		flex-direction: row;
		border-bottom: #F6F5F5 1px solid;
		width: 750rpx;
	}

	.icon {
		padding: 30rpx 16rpx 0rpx 30rpx;
		height: 78rpx;
		width: 76rpx;
	}

	.explainBox {
		/* margin-top: 35rpx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.explainTittle {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.slogan {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #949492;
	}
	
	.balanceIcon {
		height: 33rpx;
		width: 27rpx;
		position: absolute;
		bottom: 33rpx;
	}
	
	.clearBlance {
		height: 22rpx;
		width: 22rpx;
		position: absolute;
		right: 36rpx;
		bottom: 30rpx;
	}
	
	.chargeButton {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		width: 680rpx;
		height: 101rpx;
		background: linear-gradient(90deg, #6ac7fc, #52b8fa);
		border-radius: 50rpx;
		font-size: 38rpx;
		color: #FFFFFF;
		margin-top: 210rpx;
	}
	.iconBox {
		position: absolute;
		right: 30rpx;
		top: 52rpx;
	}
</style>

